<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="政策资讯">
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-button type="primary" @click="clickCreat">添加资讯</el-button>
          </el-col>
          <el-col>
            <div style="display: flex; justify-content: flex-end">
              <el-input
                @clear="clear"
                clearable
                v-model="form.search"
                style="width: 300px; margin-left: 15px"
                placeholder="搜索标题、正文"
                class="input-with-select"
              >
                <el-button
                  @click="searchVal"
                  slot="append"
                  style="
                    background-color: #45a321;
                    color: #fff;
                    border-radius: 0;border:1px solid #45a321
                    border:1px solid #45a321;
                  "
                  >搜索</el-button
                >
                <i slot="prefix-icon" class="el-icon-search"></i>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-table
          align="center"
          :data="list.list"
          border
          style="width: 100%; margin: 20px 0"
        >
          <el-table-column align="center" prop="title" label="新闻资讯标题">
          </el-table-column>
          <el-table-column align="center"  label="类型">
            <template slot-scope="scope">
              <div>
                 <span v-if="scope.row.type == 1">政策</span>
                 <span v-if="scope.row.type == 2">法规</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="online_time" label="发布时间">
          </el-table-column>
          <el-table-column align="center" prop="myorder" label="排序">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                class="editText"
                @click="clickEdit(scope.row.id)"
                type="text"
                >修改</el-button
              >
              <el-button
                class="deletText"
                @click="deletUser(scope.row.id)"
                type="text"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="list.page"
            :page-size="list.size"
            layout="total, prev, pager, next, jumper"
            :total="parseInt(list.count)"
            align="left"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="活动"> <activities /> </el-tab-pane>
      <el-tab-pane label="新闻资讯"> <realtime /> </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="政策资讯"
      :visible.sync="dialogVisible"
      width="50%"
      top="10.8vh"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">标题</p>
          <div class="left_w">
            <el-input v-model="form.title" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">排序</p>
          <div class="left_w">
            <el-input
              v-model="form.myorder"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">发布时间</p>
          <div class="left_w">
            <el-date-picker
              v-model="form.online_time"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">是否在前台展示</p>
          <el-select v-model="form.is_show" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">类型</p>
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in type"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="news_mrt">
          <p>正文</p>
          <Editor
            style="margin-top: 20px"
            :id="`test5`"
            v-model="form.content"
          />
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { VUE_APP_BASE_API } from "@/config.js";
import {
  policyList,
  policyAdd,
  policyEdit,
  policyDel,
  policyInfo,
  getTypes,
} from "@/api/adminWeb";
import Editor from "@/components/Editor";
import activities from "./activities";
import realtime from "./realtime";
export default {
  data() {
    return {
      VUE_APP_BASE_API,
      list: [],
      activeName: 0,
      dialogVisible: false,
      form: {
        policy_id: "",
        title: "",
        online_time: "",
        content: "",
        search: "",
        myorder: "",
        is_show: "",
      },
      contentDesc: "",
      clearDesc: 0,
      fileList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      options: [
        {
          key: 1,
          name: "是",
        },
        {
          key: 2,
          name: "否",
        },
      ],
      type: [],
    };
  },
  components: {
    Editor,
    activities,
    realtime,
  },
  mounted() {
    this.getLIst();
    this.getListType();
  },
  methods: {
    async getListType() {
      try {
        this.type = await getTypes();
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    searchVal() {
      this.getLIst();
    },
    clickCreat() {
      this.dialogVisible = true;
    },
    async clickEdit(id) {
      try {
        this.form = await policyInfo({
          policy_id: id,
        });
        this.contentDesc = this.form.content;
        this.dialogVisible = true;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    deletUser(id) {
      this.$confirm("此操作将删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await policyDel({
              policy_id: id,
            });
            this.getLIst();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } catch (error) {
            this.$message.error(error.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    clear() {
      this.getLIst();
    },
    handleClose() {
      this.clearDesc = 1;
      this.dialogVisible = false;
      this.form = {
        title: "",
        online_time: "",
        content: "",
        tpic: "",
        myorder: "",
        type,
      };
    },
    async onSuccess(response, file, fileList) {
      if (response) {
        // console.log(response.data.url);
        this.form.tpic = response.data.url;
        this.$nextTick(() => {
          this.form.tpic = response.data.url;
        });
        this.$message.success("上传成功");
      }
    },
    async getLIst() {
      try {
        this.list = await policyList({
          keyword: this.form.search,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    descVal(val) {
      this.form.content = val;
    },
    async save() {
      try {
        const { title, online_time, content, myorder, is_show, type } =
          this.form;
        if (this.form.id) {
          await policyEdit({
            policy_id: this.form.id,
            title,
            online_time,
            content,
            myorder,
            is_show,
            type,
          });
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.clearDesc = 1;
          this.form = {
            title: "",
            online_time: "",
            content: "",
            tpic: "",
            myorder: "",
            is_show: "",
            type: "",
          };
        } else {
          await policyAdd({
            title,
            online_time,
            content,
            myorder,
            is_show,
            type,
          });
          this.clearDesc = 1;
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.form = {
            title: "",
            online_time: "",
            content: "",
            tpic: "",
            myorder: "",
            is_show: "",
            type: "",
          };
        }
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    cancle() {
      this.dialogVisible = false;
      this.clearDesc = 1;
      this.form = {
        title: "",
        online_time: "",
        content: "",
        tpic: "",
        myorder: "",
        is_show: "",
        type: "",
      };
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        this.list = await policyList({
          keywords: this.form.search,
          page: size,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        this.list = await policyList({
          keywords: this.form.search,
          page: currentPage,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.news_mrt {
  margin-bottom: 30px;
}
.left_w {
  width: 80%;
}
</style>